<template>
  <div class="find-fund">
    <div class="fund-left">
      <img src="@/assets/bigscreen2/融资金额.png" alt="" />
      <count-to
        class="left-number"
        :startVal="0"
        :endVal="Number(amount.value)"
        :duration="1000"
        :decimals="2"
      ></count-to>
      <p class="left-text">{{ amount.name }}({{ amount.unit }})</p>
    </div>
    <div class="fund-right">
      <div class="right-top">
        <p class="right-top-text">{{ credit.name }}({{ credit.unit }})</p>
        <count-to
          class="right-top-number"
          :startVal="0"
          :endVal="Number(credit.value)"
          :duration="1000"
          :decimals="2"
        ></count-to>
      </div>
      <div class="right-bottom">
        <p class="right-bottom-text">
          {{ compCount.name }}({{ compCount.unit }})
        </p>
        <count-to
          class="right-bottom-number"
          :startVal="0"
          :endVal="Number(compCount.value)"
          :duration="1500"
        ></count-to>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { ajax } from "@/store/service";

const amount = ref({ value: 0 });
const credit = ref({ value: 0 });
const compCount = ref({ value: 0 });

const init = async () => {
  const [res] = await ajax.fund();
  amount.value = res.amount;
  credit.value = res.credit;
  compCount.value = res.compCount;
};

onMounted(() => {
  init();
});

</script>

<style scoped lang='scss'>
.find-fund {
  height: 137px;
  display: flex;
  justify-content: space-between;
  .fund-left {
    width: 177px;
    height: 137px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("@/assets/bigscreen2/金融背景.png");
    img {
      width: 42px;
      height: 42px;
    }
    .left-number {
      margin-top: 9px;
      font-size: 23px;
      font-family: D-DIN-PRO-Heavy, D-DIN-PRO;
      font-weight: 800;
      color: #ffffff;
      line-height: 28px;
      letter-spacing: 1px;
    }
    .left-text {
      margin-top: 6px;
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #ffffff;
      line-height: 24px;
    }
  }
  .fund-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .right-top {
      width: 285px;
      height: 63px;
      display: flex;
      align-items: center;
      background-image: url("@/assets/bigscreen2/金融背景 拷贝.png");
      .right-top-text {
        width: 130px;
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        padding-left: 20px;
      }
      .right-top-number {
        font-size: 20px;
        font-family: D-DIN-PRO-Heavy, D-DIN-PRO;
        font-weight: 800;
        color: #ffffff;
        line-height: 24px;
        letter-spacing: 1px;
      }
    }
    .right-bottom {
      width: 285px;
      height: 63px;
      background-image: url("@/assets/bigscreen2/金融背景 拷贝.png");
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
      .right-bottom-text {
        width: 130px;
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
      }
      .right-bottom-number {
        font-size: 20px;
        font-family: D-DIN-PRO-Heavy, D-DIN-PRO;
        font-weight: 800;
        color: #ffffff;
        line-height: 24px;
      }
    }
  }
}
</style>